<template>
  <div>
    <div class="bg-purple-dark" style="height:190px">
      <div class="cardInformation">
        <div class="blueIcon" />
        <div class="dataName">{{ monitorTenantByIdData.tenantName }}</div>
      </div>
      <div class="cardUl">
        <div class="cardList">
          <div class="cardTxt">今日启动量（次）</div>
          <div class="cardNum">{{ monitorTenantByIdData.dau }}</div>
        </div>
        <div class="cardList">
          <div class="cardTxt">本周启动量（次）</div>
          <div class="cardNum">{{ monitorTenantByIdData.wau }}</div>
        </div>
        <div class="cardList">
          <div class="cardTxt">本月启动量（次）</div>
          <div class="cardNum">{{ monitorTenantByIdData.mau }}</div>
        </div>
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="bg-purple-dark" :style="{ height: '540px' }">
          <div class="browse">浏览时长分析</div>
          <div class="card-filters">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1">今日</el-menu-item>
              <el-menu-item index="2">昨日</el-menu-item>
            </el-menu>
            <div class="time-filter">
              <span>统计时间：</span>
              <el-date-picker
                v-model="search.date"
                class="intervalTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-value="search.date"
                :clearable="false"
                @change="getData"
              />
            </div>
          </div>

          <ve-chart v-if="stayTimekData.rows&&!!stayTimekData.rows.length" :data="stayTimekData" :settings="chartSettings" :extend="chartExtend" />
          <NoData v-if="stayTimekData.rows &&!stayTimekData.rows.length" />
        </div>
       
      </el-col>
      <el-col :span="12">
        <div class="bg-purple-dark" :style="{ height: '540px' }">
          <div class="cardInformation">
            <div class="dataName">动态轨迹</div>
          </div>
          <el-timeline v-if="operationRecordData.records&&!!operationRecordData.records.length" :reverse="false" class="timeline">
            <el-timeline-item
              v-for="(item, index) in operationRecordData.records"
              :key="index"
            >
              <div><span style="margin-right:10px">{{ item.userName }}</span>{{ item.summary }}</div>
              <div style="margin-top:10px">{{ item.time }}</div>
            </el-timeline-item>
          </el-timeline>
          <NoData v-if="operationRecordData.records &&!operationRecordData.records.length" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
import NoData from '@/components/NoData'

var minutes = 'YYYY-MM-DD HH:mm:ss'
var now = new Date() // 当前日期
var nowDay = now.getDate() // 当前日
var nowMonth = now.getMonth() // 当前月
var nowYear = now.getFullYear() // 当前年

export default {
  components: {
    NoData
  },
  data() {
    return {
      activeIndex: '1', // 默认导航
      search: {
        date: [],
        beginDate: '',
        endDate: ''
      },
      detailId: ''
    }
  },
  computed: {
    ...mapState('monitor', [
      'conditions',
      'size',
      'monitorTenantByIdData', // 根据ID查询活跃租户
      'stayTimekData', // 停留时间趋势图
      'operationRecordData' // 分页查询操作记录
    ]),
    chartSettings() {
      // 私有属性
      const chartSettings = {
        type: 'histogram',
        labelMap: {
          yyValue: '时长(分钟)'
        }
      }
      return { ...chartSettings }
    },
    chartExtend() {
      const chartExtend = {
        legend: {
          show: false
        },
        yAxis: {
          name: '时长(分钟)',
          nameLocation: 'end',
          position: 'left',
          splitLine: {
            lineStyle: {
              type: 'dotted' // 虚线
            }
          }
        },
        series: {
          type: 'bar',
          symbolSize: 9,
          barWidth: 50,
          itemStyle: {
            normal: {
              // 这里是重点
              color: params => {
                // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                const colorList = ['#F56C6C', '#70C2D5', '#5496F2', '#FFB35D']
                return colorList[params.dataIndex]
              }
            }
          }
        },
        grid: {
          x: 30,
          x2: 30,
          y: 30,
          y2: 0 // 距离下端位置
        }
      }
      return chartExtend
    }
  },
  created() {
    this.detailId = this.$route.query.setid
  },
  mounted() {
    this.$store.dispatch('monitor/getMonitorTenantById', {
      tenantId: this.detailId
    }) // 根据ID查询活跃租户
    this.$store.dispatch('monitor/getPageOperationRecord', {
      tenantId: this.detailId
    }) // 分页查询操作记录
    this.handleTimeNew(this.detailId) // 停留时间趋势图
  },
  methods: {
    handleTimeNew(id) {
      const startDay = new Date(nowYear, nowMonth, nowDay)
      const endDay = new Date(nowYear, nowMonth, nowDay + 1)
      const beginDate = moment(startDay).format(minutes)
      const endDate = moment(endDay).format(minutes)
      this.search.date = []
      this.search.date.push(beginDate, endDate)
      this.$store.dispatch('monitor/getStayTimeTrend', {
        startTime: beginDate,
        endTime: endDate,
        tenantId: id
      })
    },
    handleSelect(key) {
      // 导航
      if (key === '1') {
        this.handleTimeNew(this.detailId)
      }
      if (key === '2') {
        const yesterdayStartDate = new Date(nowYear, nowMonth, nowDay - 1)
        const yesterdayEndDate = new Date(nowYear, nowMonth, nowDay)
        const beginDate = moment(yesterdayStartDate).format(minutes)
        const endDate = moment(yesterdayEndDate).format(minutes)
        this.search.date = []
        this.search.date.push(beginDate, endDate)
        this.$store.dispatch('monitor/getStayTimeTrend', {
          startTime: beginDate,
          endTime: endDate,
          tenantId: this.detailId
        })
      }
    },
    getData(e) {
      // 日历筛选
      const beginDate = e && moment(e[0]).format(minutes)
      const endDate = e && moment(e[1]).format(minutes)
      this.$store.dispatch('monitor/getStayTimeTrend', {
        startTime: beginDate,
        endTime: endDate,
        tenantId: this.detailId
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import './style';

</style>
